<script>

import * as echarts from 'echarts';
import $ from 'jquery'
export default {
  name: 'VisualizationOne',
  data() {
    return{

    }
  },
  mounted() {
    this.init("贵州省")
    // this.getData();
  },
  methods: {
    // getData() {
    //   this.$axios.get('/api/vis/data2', {}).then(res => {
    //     if (res.data.code === 20041) {
    //       let data = [];
    //       for (let i = 0; i < res.data.data.length; i++) {
    //         data.push(
    //             {name: res.data.data[i].param,
    //               value: res.data.data[i].param1},
    //
    //         );
    //       }
    //       this.init("贵州省", data)
    //     }
    //   }).catch(error => {
    //     this.open4(error);
    //   })
    // },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    init(dqName) {

      var chartDom = document.getElementById('main1');
      var myChart = echarts.init(chartDom);
      var option;

      $.get('/json/' + dqName + '.json', function (geoJson) {
        let sizeMap = 60;
        echarts.registerMap('HK', geoJson);
        myChart.setOption(
            (option = {
              layoutCenter: ['45%', '50%'],//位置
              layoutSize: sizeMap + '%',//大小
              title: {
                text: '贵州各地区5A级景区数量',
                subtext: 'Summary of scenic spots around Guizhou',
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}' // 自定义提示框的显示格式，{b} 代表区域名称，{c} 代表数据值
              },
              visualMap: {
                show: false,
                min: 0,
                max: 2,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                  color: ['lightskyblue', 'yellow', 'orangered']
                }
              },
              series: [
                {
                  type: 'map',
                  map: 'HK',
                  zoom: 1.3,
                  label: {
                    show: true
                  },
                  data:[
                    {name: '毕节市', value: 2},
                    {name: '六盘水市', value: 0},
                    {name: '安顺市', value: 2},
                    {name: '贵阳市', value: 1},
                    {name: '遵义市', value: 1},
                    {name: '铜仁市', value: 1},
                    {name: '黔东南苗族侗族自治州', value: 1},
                    {name: '黔南布依族苗族自治州', value: 1},
                    {name: '黔西南布依族苗族自治州', value: 0},
                  ],
                }
              ],
            })
        );
      });

      option && myChart.setOption(option);
    }
  }

}
</script>

<template>
  <div id="main1"></div>
</template>

<style scoped>
#main1 {
  width: 100%;
  height: 100%;
}
</style>